import React, { Component } from 'react';
import {
    NavBar,
    WingBlank,
    Toast,
    InputItem,
    WhiteSpace,
    Button,
} from 'antd-mobile';
import '../css/login.css';
import request from '../plugin/request';

class Login extends Component {
    state = {
        usernameHasError: false,
        username: '',
        passwordHasError: false,
        password: '',
    };

    constructor(props) {
        super(props);
        // 绑定事件函数内部的 this
        this.login = this.login.bind(this);
    }

    usernameErrorClick = () => {
        if (this.state.usernameHasError) {
            Toast.fail('用户名必须是 5 ~ 20 位的字母数字下划线组合的字符');
        }
    };

    usernameChange = (username) => {
        if (/^[a-zA-Z0-9_]{5,20}$/.test(username)) {
            this.setState({
                usernameHasError: false,
            });
        } else {
            this.setState({
                usernameHasError: true,
            });
        }
        this.setState({
            username,
        });
    };

    passwordErrorClick = () => {
        if (this.state.passwordHasError) {
            Toast.fail('密码至少 6 位');
        }
    };

    passwordChange = (password) => {
        if (/^[a-zA-Z0-9_]{6,}$/.test(password)) {
            this.setState({
                passwordHasError: false,
            });
        } else {
            this.setState({
                passwordHasError: true,
            });
        }
        this.setState({
            password,
        });
    };

    async login() {
        const res = await request.post('/login', {
            username: this.state.username,
            password: this.state.password,
        });
        if (res.code !== 200) {
            Toast.fail(res.message);
            return;
        }
        // 走到这里，说明登录成功，将登录获取的 token 保存到 sessionStorage 里面
        window.sessionStorage.setItem('token', res.data.token);
        // 保存后，跳转到博客列表页面
        this.props.history.push('/blogs');
    }

    render() {
        return (
            <div className="login">
                {/* 顶部导航 */}
                <NavBar>网站博客</NavBar>

                {/* 登录输入框 */}
                <div className="login-box">
                    <WingBlank>
                        <InputItem
                            placeholder="用户名"
                            error={this.state.usernameHasError}
                            onErrorClick={this.usernameErrorClick}
                            onChange={this.usernameChange}
                            value={this.state.username}
                        />

                        <WhiteSpace />

                        <InputItem
                            type="password"
                            placeholder="密码"
                            error={this.state.passwordHasError}
                            onErrorClick={this.passwordErrorClick}
                            onChange={this.passwordChange}
                            value={this.state.password}
                        />

                        <WhiteSpace />

                        <Button type="primary" onClick={this.login}>
                            登录
                        </Button>

                        <WhiteSpace />

                        <Button
                            type="ghost"
                            size="small"
                            onClick={() => this.props.history.push('/register')}
                        >
                            还没账号？去注册
                        </Button>
                    </WingBlank>
                </div>
            </div>
        );
    }
}

export default Login;
